<template>
  <page-view>
    <div class="info">
      <div class="info-left">
        <div class="info-chart-single">
          <line-chart>
            <template #title>
              <div>内容数据</div>
            </template>
          </line-chart>
        </div>
        <div class="info-chart-double">
          <line-chart-more>
            <template #title>
              <div>内容时段分析</div>
            </template>
          </line-chart-more>
        </div>
      </div>
      <div class="info-right">
        <el-table
            ref="table"
            class="info-table"
            :data="tableData"
            border
        >
          <el-table-column
              prop="name"
              label="姓名"
              align="center"
          >
            <template v-slot="scope">
              <div class="link-type" @click="nameClicked">{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              align="center"
          />
        </el-table>
      </div>
    </div>
  </page-view>
</template>

<script>

// echarts引入
import * as echarts from 'echarts'
import { graphic } from 'echarts';
import LineChart from './components/line-chart'
import LineChartMore from './components/line-chart-more'

export default {
  name: "workplace",
  components: {
    LineChart, LineChartMore
  },
  props:{

  },
  data() {
    return {
      chartOption:{},
      tableData:[],
    }
  },
  beforeCreate() {

  },
  created() {

  },
  mounted() {
    // 初始化echarts
    // const myEchartDiv = document.getElementById('myEchart')
    // const myEchart = echarts.init(myEchartDiv)

    // 服务端返回的折线图数据源
    const chartData = [
      {
        x:'2023-07-28',
        y:'60',
      },
      {
        x:'2023-07-29',
        y:'5',
      },
      {
        x:'2023-07-30',
        y:'20',
      },
      {
        x:'2023-07-31',
        y:'36',
      },
      {
        x:'2023-08-01',
        y:'10',
      },
      {
        x:'2023-08-02',
        y:'10',
      },
      {
        x:'2023-08-03',
        y:'20',
      },
    ]

    // 每个点位置处理
    let graphicElements = [this.graphicFactory({ left: '2.6%' }), this.graphicFactory({ right:0 })]

    // 根据服务端返回的数据分离出x y轴数据
    let xAxis = []
    let yAxis = []

    chartData.forEach((el, idx) => {
      xAxis.push(el.x);
      yAxis.push(el.y);
      if (idx === 0) {
        graphicElements[0].style.text = el.x;
      }
      if (idx === chartData.length - 1) {
        graphicElements[1].style.text = el.x;
      }
    });

    // 绘制图表
    this.chartOption = {
      // 折线图标题
      // title: {
      //   text: '内容数据',
      // },
      grid: {
        left: '2.6%',
        right: '0',
        top: '10',
        bottom: '30',
      },
      // x轴配置项
      xAxis: {
        type: 'category',
        offset: 2,
        data: xAxis,
        boundaryGap: false,
        // x轴坐标显示
        axisLabel: {
          color: '#4E5969',
          formatter(value, idx) {
            if (idx === 0) return '';
            if (idx === xAxis.length - 1) return '';
            return `${value}`;
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          interval: (idx) => {
            if (idx === 0) return false;
            if (idx === xAxis.length - 1) return false;
            return true;
          },
          lineStyle: {
            color: '#E5E8EF',
          },
        },
        axisPointer: {
          show: true,
          lineStyle: {
            color: '#23ADFF',
            width: 2,
          },
        },
      },
      // y轴配置项
      yAxis: {
        type: 'value',
        // y轴的样式控制
        axisLine: {
          show: false
        },
        // y轴坐标显示处理
        axisLabel: {
          formatter(value, idx) {
            if (idx == 0) return value;
            return `${value}k`;
          },
        },
        // 控制y轴上的间隔突出的小线条样式
        axisTick: {
          show: false,
        },
        // y轴刻度线设置实线solid 或者 虚线dashed
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#E5E8EF',
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          // console.log('params:', params)
          const { axisValueLabel, data } = params[0]
          return `<div>
            <p class="tooltip-title">${axisValueLabel}</p>
            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${data}</span></div>
          </div>`;
        },
        className: 'echarts-tooltip-diy',
      },
      graphic: {
        elements: graphicElements,
      },
      series: [
        {
          data: yAxis,
          // 图类型：bar为柱状图
          type: 'line',
          // 光滑曲线
          smooth: true,
          symbolSize: 12,
          emphasis: {
            focus: 'series',
            itemStyle: {
              borderWidth: 2,
            },
          },
          lineStyle: {
            width: 3,
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(30, 231, 255, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(36, 154, 255, 1)',
              },
              {
                offset: 1,
                color: 'rgba(111, 66, 251, 1)',
              },
            ]),
          },
          showSymbol: false,
          // 折线图下方颜色
          areaStyle: {
            opacity: 0.8,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(17, 126, 255, 0.16)',
              },
              {
                offset: 1,
                color: 'rgba(17, 128, 255, 0)',
              },
            ]),
          },
        }
      ]
    }
    // myEchart.setOption(this.options)

    // myEchart.setOption({
    //   // 折线图标题
    //   // title: {
    //   //   text: '内容数据',
    //   // },
    //   grid: {
    //     left: '2.6%',
    //     right: '0',
    //     top: '10',
    //     bottom: '30',
    //   },
    //   // x轴配置项
    //   xAxis: {
    //     type: 'category',
    //     offset: 2,
    //     data: xAxis,
    //     boundaryGap: false,
    //     // x轴坐标显示
    //     axisLabel: {
    //       color: '#4E5969',
    //       formatter(value, idx) {
    //         if (idx === 0) return '';
    //         if (idx === xAxis.length - 1) return '';
    //         return `${value}`;
    //       },
    //     },
    //     axisLine: {
    //       show: false,
    //     },
    //     axisTick: {
    //       show: false,
    //     },
    //     splitLine: {
    //       show: true,
    //       interval: (idx) => {
    //         console.log('interval idx', idx)
    //         if (idx === 0) return false;
    //         if (idx === xAxis.length - 1) return false;
    //         return true;
    //       },
    //       lineStyle: {
    //         color: '#E5E8EF',
    //       },
    //     },
    //     axisPointer: {
    //       show: true,
    //       lineStyle: {
    //         color: '#23ADFF',
    //         width: 2,
    //       },
    //     },
    //   },
    //   // y轴配置项
    //   yAxis: {
    //     type: 'value',
    //     // y轴的样式控制
    //     axisLine: {
    //       show: false
    //     },
    //     // y轴坐标显示处理
    //     axisLabel: {
    //       formatter(value, idx) {
    //         if (idx == 0) return value;
    //         return `${value}k`;
    //       },
    //     },
    //     // 控制y轴上的间隔突出的小线条样式
    //     axisTick: {
    //       show: false,
    //     },
    //     // y轴刻度线设置实线solid 或者 虚线dashed
    //     splitLine: {
    //       show: true,
    //       lineStyle: {
    //         type: 'dashed',
    //         color: '#E5E8EF',
    //       },
    //     },
    //   },
    //   tooltip: {
    //     trigger: 'axis',
    //     formatter(params) {
    //       // console.log('params:', params)
    //       const { axisValueLabel, data } = params[0]
    //       return `<div>
    //         <p class="tooltip-title">${axisValueLabel}</p>
    //         <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${data}</span></div>
    //       </div>`;
    //     },
    //     className: 'echarts-tooltip-diy',
    //   },
    //   graphic: {
    //     elements: graphicElements,
    //   },
    //   series: [
    //     {
    //       data: yAxis,
    //       // 图类型：bar为柱状图
    //       type: 'line',
    //       // 光滑曲线
    //       smooth: true,
    //       symbolSize: 12,
    //       emphasis: {
    //         focus: 'series',
    //         itemStyle: {
    //           borderWidth: 2,
    //         },
    //       },
    //       lineStyle: {
    //         width: 3,
    //         color: new graphic.LinearGradient(0, 0, 1, 0, [
    //           {
    //             offset: 0,
    //             color: 'rgba(30, 231, 255, 1)',
    //           },
    //           {
    //             offset: 0.5,
    //             color: 'rgba(36, 154, 255, 1)',
    //           },
    //           {
    //             offset: 1,
    //             color: 'rgba(111, 66, 251, 1)',
    //           },
    //         ]),
    //       },
    //       showSymbol: false,
    //       // 折线图下方颜色
    //       areaStyle: {
    //         opacity: 0.8,
    //         color: new graphic.LinearGradient(0, 0, 0, 1, [
    //           {
    //             offset: 0,
    //             color: 'rgba(17, 126, 255, 0.16)',
    //           },
    //           {
    //             offset: 1,
    //             color: 'rgba(17, 128, 255, 0)',
    //           },
    //         ]),
    //       },
    //     }
    //   ]
    // })

    let arr = []
    for (let i = 0; i < 17; i ++) {
      const obj = {
        name:"张三",
        address:'湖北省武汉市洪山区东湖花木城'
      };
      arr.push(obj)
    }
    this.tableData = arr
  },
  methods:{
    /**
     * 工厂方法
     * @param side
     * @returns {*&{bottom: string, style: {textAlign: string, fontSize: number, text: string, fill: string}, type: string}}
     */
   graphicFactory(side) {
     return {
       type: 'text',
       bottom: '8',
       ...side,
       style: {
         text: '',
         textAlign: 'center',
         fill: '#4E5969',
         fontSize: 12,
       },
     };
   }
  }
}
</script>

<style lang="scss" scoped>
.page-view {
  //background-color: #f3f4f5;
  //padding: 20px;
}

.info {
  display: flex;
  border: 1px solid #f3f4f5;
  // 沿着交叉轴方向自动进行拉升到最大。 让左右高度一致
  align-items: stretch;
}

.info-left {
  width: 70%;
  margin-right: 10px;
}

.info-right {
  width: 30%;
  border-radius: 10px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  // 这个是关键，避免右侧内容太短时不够填满父容器、太长时挤占左侧空间
  flex: 1;
}

.info-chart-single, .info-chart-double {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}

.info-chart-single {
  margin-bottom: 10px
}

.info-table {
  width: 100%;
}

</style>
